<template>
    <div>
        <div class="page">
            <el-container>
                <el-header style="height: 70px; width: 100%">
                    <span class="span1">Kueiq音乐</span><span class="span2" @click="removeToken"><router-link to="/Login">退出登录</router-link></span>
                </el-header>
                <el-container>
                    <el-aside style="width: 200px">
                        <el-menu
                                :default-active="this.$route.path"
                                 @select="handleSelect"
                                 router>
                            <el-menu-item index="/Shuju">
                                <i class="el-icon-pie-chart"></i>
                                <span slot="title">数据统计</span>
                            </el-menu-item>
                            <el-submenu index="2">
                                <template slot="title">
                                    <i class="el-icon-user-solid"></i>
                                    <span>权限管理</span>
                                </template>
                                <el-submenu index="2-1">
                                    <template slot="title">用户权限</template>
                                    <el-menu-item index="/Users">修改信息</el-menu-item>
                                </el-submenu>
                                <el-submenu index="2-2">
                                    <template slot="title">管理员权限</template>
                                    <el-menu-item index="/Add">添加管理员</el-menu-item>
                                    <el-menu-item index="/Update">修改信息</el-menu-item>
                                </el-submenu>
                            </el-submenu>
                            <el-menu-item index="/Singers">
                                <i class="el-icon-mic"></i>
                                <span slot="title">歌手管理</span>
                            </el-menu-item>
                            <el-submenu index="4">
                                <template slot="title">
                                    <i class="el-icon-service"></i>
                                    <span>歌曲管理</span>
                                </template>
                                <el-menu-item index="/AddSong">添加歌曲</el-menu-item>
                                <el-menu-item index="/FindSong">查询歌曲</el-menu-item>
                                <el-menu-item index="/UpdateSong">修改歌曲信息</el-menu-item>
                            </el-submenu>
                            <el-menu-item index="5">
                                <i class="el-icon-tickets"></i>
                                <span slot="title">订单中心</span>
                            </el-menu-item>
                            <el-menu-item index="/Tong">
                                <i class="el-icon-setting"></i>
                                <span slot="title">系统设置</span>
                            </el-menu-item>
                        </el-menu>
                    </el-aside>
                    <el-container>
                        <el-main>
                            <router-view></router-view>
                        </el-main>
                    </el-container>
                </el-container>
<!--                <el-footer style="height: 40px">Footer</el-footer>-->
            </el-container>
        </div>
    </div>
</template>

<script>
    export default {
        name: "H-index",
        methods:{
            handleSelect(index) {
                this.$router.push(index);
            },
            removeToken(){
                localStorage.removeItem('token')
            }
        }
    }
</script>

<style scoped>

    .el-header{
        position: relative;
        text-align: center;
        line-height: 70px;
        height: 70px;
        background-image: linear-gradient(to right,#008B8B, #20B2AA);
        color: #fff;
    }
    .el-header .span1{
        float: left;
        font-size: 30px;
        font-weight: bold;
        padding-left: 20px;
        font-family: "Droid Sans Mono Slashed";
    }
    .el-header .span2{
        float: right;
    }
    .el-menu-item:focus, .el-menu-item:hover{
     background-color: #008B8B;
    }
    .el-submenu__title:focus, .el-submenu__title:hover{
        background-color: #008B8B;
    }
    /deep/ .el-submenu__title:hover {
        background-color: #008B8B;
    }
    /deep/ .el-menu{
        background-color: #48D1CC;
    }
    .el-aside {
        background-color: #20B2AA;
        color: white;
        display: block;
        position: absolute;
        left: 0;
        top: 70px;
        bottom: 0;
        overflow-y: visible;
        overflow-x: hidden;
    }
    .el-menu-item i{
        color: white;
    }
    /deep/ .el-submenu__title i {
        color: white;
    }
    .el-menu{
        background-color: #20B2AA;
        color: white;
    }
    .el-menu-item{
        color: white;
    }
    /deep/ .el-submenu__title{
        color: white;
    }
    .el-menu-item.is-active {
        color: #080808;
    }
    .el-main {
        background-color: #E9EEF3;
        color: #333;
        position: absolute;
        left: 200px;
        right: 0;
        top: 70px;
        bottom: 0;
        overflow-y: scroll;
    }
.span2 a{
    text-decoration: none;
    color: white;
}
</style>